<template>
	<view>
		<view v-for="d in list" class="list">
			<view class="p-1 tc">{{d.source}}</view>
			<view class="p-1 title" @click="showNews(d.nid)">{{d.title}}</view>
			<view class="p-1 tr">{{ tools.formatDate(d.lastupdate) }}</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onPullDownRefresh
	} from '@dcloudio/uni-app'

	import {
		ref,
		onMounted
	} from 'vue'

	import {
		api
	} from '../../script/api.js'
	import {
		tools
	} from '../../script/tools.js'

	onPullDownRefresh(() => {
		console.log('下拉刷新中。。。')
		query()
	})

	onMounted(() => {
		uni.startPullDownRefresh({})
	})

	const queryInfo = ref({
		title: '',
		info: '',
	})
	const page = ref({
		pageNumber: 1,
		pageSize: 5
	})
	const list = ref([])

	const query = () => {
		uni.showLoading()
		api.get(
			'/crud/news',
			tools.concatJson(queryInfo.value, page.value),
			(data) => {
				uni.stopPullDownRefresh()
				uni.hideLoading()
				if (data.success) {
					page.value = data.pageBean
					list.value = data.data
				} else {
					uni.showToast({
						title: data.message,
						icon: "error"
					})
				}
			}
		)
	}

	const showNews = (nid) => {
		uni.showLoading()
		api.get(`/crud/news/${nid}`, {}, (data) => {
			uni.hideLoading()
			console.log("新闻详情", data)
			uni.showModal({
				title: data.data.title,
				content: data.data.info
			})
		})
	}
</script>

<style lang="scss" scoped>
	.list {
		margin: 5vw 1vw;
		border: 1px solid #dcdcdc;
		border-radius: 2px;

		.tc {
			border-bottom: 1px solid #dcdcdc;
			font-weight: bold;
			font-size: 1.2em;
		}

		.tr {
			border-top: 1px solid #dcdcdc;
			color: #999;
		}

		.title {
			text-decoration: underline;
			color: #3e58ff;
		}
	}
</style>